<template>
  <div class="page">
    <div class="mainDiv">
      <div class="header">
        <div class="menu-list">
          <a href="javascript:;" class="item active">首页</a>
          <a href="javascript:;" class="item">三无救助</a>
          <a href="javascript:;" class="item">特殊生活补贴</a>
          <a href="javascript:;" class="item">精神病医疗救助</a>
        </div>
        <div class="title">
          <img src="../../static/logo.png" alt="" />
        </div>
        <div class="menu-list">
          <a href="javascript:;" class="item">通讯补贴</a>
          <a href="javascript:;" class="item">两项补贴</a>
          <a href="javascript:;" class="item">残疾儿童救助</a>
          <a href="javascript:;" class="item">个人档案</a>
          <el-select v-model="formInline.region9" placeholder="更多" style="width:150px;">
          <el-option label="义务教育补助" value="shanghai"></el-option>
          <el-option label="高中及中等专科学校补助" value="beijing"></el-option>
        </el-select>
        </div>
      </div>
      <div class="contentWrap">
        <div class="conLeft">
          <div class="handle">
            <div class="select-area">
              <img src="../../static/zuobiao.png" alt="" class="ico" />
              <span class="text" @click="showSelectArea">选择区域</span>
              <div class="select-wrap" v-show="showSelectArea">
                <el-tree
                  :data="data"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                ></el-tree>
              </div>
            </div>
            <div class="fuwuhuizong" @click="dialogVisible = true">
              <img src="../../static/tongji.png" alt="" class="ico" />
              <span class="text">服务汇总</span>
            </div>
          </div>
          <!-- 残疾类别 -->
          <div class="canjileibie">
            <canjileibie></canjileibie>
          </div>
          <!-- 残疾等级 -->
          <div class="canjidengji">
            <canjidengji></canjidengji>
          </div>
          <!-- 业务待办 -->
          <div class="yewudaiban">
            <yewudaiban></yewudaiban>
          </div>
        </div>
        <div class="conCenter">
          <!--分类显示菜单-->
          <div class="catenav">
             <div class="box-list">
                    <div class="box" @click="canjirenshuDialog">
                        <p class="text"><span>残疾人数</span></p>
                        <p class="num">9346</p>
                      </div>
                      <div class="box" @click="handelShequDialog">
                        <p class="text"><span>村(社区)数</span></p>
                        <p class="num">9346</p>
                      </div>
                      <div class="box">
                        <p class="text"><span>多(街道/镇)数</span></p>
                        <p class="num">9346</p>
                      </div>
                      <div class="box">
                        <p class="text"><span>县(区)数</span></p>
                        <p class="num">9346</p>
                      </div>
              </div>
          </div>
          <!--区域地图-->
          <div class="areamap">
            <areamap></areamap>
          </div>
          <!--各地分布-->
          <div class="gedifenbu">
            <gedifenbu></gedifenbu>
          </div>
        </div>
        <div class="conRight">
          <div class="handle2">
            <div class="select-time" style="float: left">
              <el-date-picker v-model="time" type="date" placeholder="选择日期">
              </el-date-picker>
              <el-button type="primary">主要按钮</el-button>
            </div>
          </div>
          <!--服务人数-->
          <div class="fuwurenshu">
            <fuwurenshu></fuwurenshu>
          </div>

          <!--就业类型-->
          <div class="jiuyeleixing">
            <jiuyeleixing></jiuyeleixing>
          </div>
        </div>
      </div>
    </div>

    <!-- 政策服务享受情况统计汇总表 -->
    <el-dialog
      title="政策服务享受情况统计汇总表"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <div class="shuoming-handel">
        <el-date-picker v-model="time1" type="date" placeholder="选择日期">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-download">导出</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%" max-height="300">
        <el-table-column prop="xmname" label="救助服务项目" width="180">
          <template slot-scope="scope">
            <el-button
              @click="showsJiedao(scope.row)"
              type="text"
              size="small"
              >{{ scope.row.xmname }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="num1" label="应享受人数">
            <template slot-scope="scope">
              <el-button
                @click="showsRenyuan(scope.row)"
                type="text"
                size="small"
                >{{ scope.row.num1}}</el-button
              >
          </template>
        </el-table-column>
        <el-table-column prop="num2" label="已享受人数"> </el-table-column>
        <el-table-column prop="num3" label="未享受人数"> </el-table-column>
        <el-table-column prop="num4" label="未享受(待更新)人数">
        </el-table-column>
        <el-table-column prop="num5" label="未享受(待申请)人数">
        </el-table-column>
        <el-table-column prop="num6" label="未享受（不符合享受标准）人数">
        </el-table-column>
        <el-table-column fixed="right" label="政策文件" width="100">
          <template slot-scope="scope">
            <el-button @click="showZc(scope.row)" type="text" size="small"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="shuoming">
        <h3 class="smtitle">说明：</h3>
        <p>
          <b>1.应享受人数：</b
          >是指依据残疾人证基本信息判定符合某项救助服务项目标准的残疾人数量。
        </p>

        <p><b>2.已享受人数：</b>是指已经享受某项救助服务项目的残疾人数量。</p>

        <p>
          <b>3.未享受人数：</b
          >是指依据残疾人证基本信息判定符合某项救助服务项目标准但还未享受该项救助服务项目的残疾人数量。
        </p>

        <p>
          <b>4.未享受（待更新）人数：</b
          >是指未享受人数中残疾人信息需要更新的残疾人数量。
        </p>

        <p>
          <b>5.未享受（待申请）人数：</b
          >是指未享受人数中相关信息都已更新，且该残疾人符合该项救助服务项目标准，但还没有享受需要申请的残疾人数量。
        </p>

        <p>
          <b>6.未享受（不符合享受标准）人数：</b
          >是指未享受人数中相关信息都已更新，但不符合该项救助服务项目标准的残疾人数量。
        </p>

        <p class="red">
          7.应享受人数=已享受人数+未享受人数；未享受人数=未享受（待更新）人数+未享受（待申请）人数+未享受（不符合享受标准）人数。
        </p>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>





    <!-- 街道弹窗一列弹窗  -->
    <el-dialog
      :title="showsJiedaoTitle"
      :visible.sync="dialogVisible1"
      width="80%"
      show-summary
    >
      <div class="shuoming-handel2">
        <!-- <el-date-picker v-model="time1" type="date" placeholder="选择日期">
        </el-date-picker> -->
        <el-button type="primary" icon="el-icon-download">导出</el-button>
      </div>
      <el-table
        :data="xmData"
        border
        style="width: 100%"
        max-height="400"
        show-summary
      >
        <el-table-column prop="xmname" label="街道办" width="180">
          <template slot-scope="scope">
            <el-button
              @click="showShequ(scope.row)"
              type="text"
              size="small"
              >{{ scope.row.xmname }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="num1" label="应享受人数"> </el-table-column>
        <el-table-column prop="num2" label="已享受人数"> </el-table-column>
        <el-table-column prop="num3" label="未享受人数"> </el-table-column>
        <el-table-column prop="num4" label="未享受(待更新)人数">
        </el-table-column>
        <el-table-column prop="num5" label="未享受(待申请)人数">
        </el-table-column>
        <el-table-column prop="num6" label="未享受（不符合享受标准）人数">
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible1 = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>


     <!--社区一列弹窗  -->
    <el-dialog
      :title="showShequTitle"
      :visible.sync="dialogVisible3"
      width="80%"
      show-summary
    >
      <div class="shuoming-handel2">
        <!-- <el-date-picker v-model="time1" type="date" placeholder="选择日期">
        </el-date-picker> -->
        <el-button type="primary" icon="el-icon-download">导出</el-button>
      </div>
      <el-table
        :data="sqData"
        border
        style="width: 100%"
        max-height="400"
        show-summary
      >
        <el-table-column prop="xmname" label="街道办" width="180"></el-table-column>
        <el-table-column prop="num1" label="应享受人数"> </el-table-column>
        <el-table-column prop="num2" label="已享受人数"> </el-table-column>
        <el-table-column prop="num3" label="未享受人数"> </el-table-column>
        <el-table-column prop="num4" label="未享受(待更新)人数">
        </el-table-column>
        <el-table-column prop="num5" label="未享受(待申请)人数">
        </el-table-column>
        <el-table-column prop="num6" label="未享受（不符合享受标准）人数">
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible3 = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>



      <!--人员名单弹窗  -->
    <el-dialog
      :title="showShequTitle"
      :visible.sync="dialogVisible4"
      width="80%"
      show-summary
    >
   <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px" size="mini">
    
      <el-form-item label="街道">
        <el-select v-model="formInline.region1" placeholder="全部" >
          <el-option label="经八路街道办" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>

       <el-form-item label="社区">
        <el-select v-model="formInline.region2" placeholder="全部">
          <el-option label="体育社区" value="shanghai"></el-option>
          <el-option label="任寨社区" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="残疾类别">
        <el-select v-model="formInline.region3" placeholder="全部">
          <el-option label="视力残疾" value="shanghai"></el-option>
          <el-option label="听力残疾" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="残疾等级">
        <el-select v-model="formInline.region4" placeholder="全部">
          <el-option label="一级残疾" value="shanghai"></el-option>
          <el-option label="二级残疾" value="beijing"></el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="性别">
        <el-select v-model="formInline.region5" placeholder="全部">
          <el-option label="男" value="shanghai"></el-option>
          <el-option label="女" value="beijing"></el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="户口类型">
        <el-select v-model="formInline.region6" placeholder="全部">
          <el-option label="农业" value="shanghai"></el-option>
          <el-option label="非农业" value="beijing"></el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="年龄">
        <el-select v-model="formInline.region7" placeholder="全部" style="width:100px;">
          <el-option label="1" value="shanghai"></el-option>
          <el-option label="2" value="beijing"></el-option>
        </el-select>
        至
        <el-select v-model="formInline.region8" placeholder="全部" style="width:100px;">
          <el-option label="3" value="shanghai"></el-option>
          <el-option label="4" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类别">
        <el-select v-model="formInline.region9" placeholder="全部" style="width:150px;">
          <el-option label="待更新" value="shanghai"></el-option>
          <el-option label="待申请" value="beijing"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="姓名">
        <el-input v-model="formInline.user" placeholder="姓名" style="width:100px;"></el-input>
      </el-form-item>
       <el-form-item label="关键字">
        <el-input v-model="formInline.user" placeholder="残疾证号或身份证号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
       <el-button type="success" icon="el-icon-download" size="mini" style="position:relative;top:1px;">导出</el-button>
    </el-form>
      <el-table
        :data="renyuanData"
        border
        style="width: 100%"
        max-height="400"
      >
        <el-table-column prop="jiedao" label="街道" width="180"></el-table-column>
        <el-table-column prop="shequ" label="社区"> </el-table-column>
        <el-table-column prop="xingming" label="姓名"> </el-table-column>
        <el-table-column prop="xingbie" label="性别"> </el-table-column>
        <el-table-column prop="canjizhenghao" label="残疾证号">
        </el-table-column>
        <el-table-column prop="minzu" label="民族">
        </el-table-column>
        <el-table-column prop="canjileibie" label="残疾类别"> </el-table-column>
        <el-table-column prop="canjidengji" label="残疾等级"> </el-table-column>
        <el-table-column prop="wenhuachengdu" label="文化程度"> </el-table-column>
        <el-table-column prop="hukouleixing" label="户口类型"> </el-table-column>
        <el-table-column prop="lianxidianhua" label="联系电话"> </el-table-column>
        <el-table-column prop="jiatingzhuzhi" label="家庭住址">
        </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">立即更新</el-button>
            </template>
          </el-table-column>
      </el-table>
      <div class="block">
       
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>

        <el-button type="warning" size="mini">警告按钮</el-button>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible4 = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>


    <!-- 政策文件查看  -->
    <el-dialog title="政策依据" :visible.sync="dialogVisible2" width="50%">
      <h3 class="zctitle">当时政策</h3>
      <p class="zcdetail">
        <a href="javascript:;" class="red"
          >1.郑政办【2009】47号三无残疾人生活救助方案.pdf
        </a>
      </p>
      <h3 class="zctitle">历史政策</h3>
      <p class="zcdetail">无</p>
      <h3 class="zctitle">享受标准</h3>
      <el-table
        :data="xiangshoubiaozhunData"
        border
        style="width: 100%"
        max-height="200"
      >
        <el-table-column label="序号" prop="index" width="50" type="index">
        </el-table-column>
        <el-table-column prop="text" label="标准"> </el-table-column>
      </el-table>

      <h3 class="zctitle">解除条件</h3>
      <el-table
        :data="jiechutiaojianData"
        border
        style="width: 100%"
        max-height="400"
      >
        <el-table-column prop="index" label="序号" width="50">
    
        </el-table-column>
        <el-table-column prop="text" label="条件"> </el-table-column>
      </el-table>
      <h3 class="zctitle">补贴标准</h3>
      <p class="zcdetail">统一标准：每人/每月/500元</p>

      <h3 class="zctitle">相关材料打印</h3>
      <el-table
        :data="xiangguancailiaoData"
        border
        style="width: 100%"
        max-height="400"
      >
        <el-table-column prop="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="text" label="材料名称"> </el-table-column>
        <el-table-column prop="url" label="操作"  width="100"> </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible2 = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>

    <!-- 中间村(社区)数弹窗 -->
    <shequdialog :visible1="visible1" @handelCancel = "handleCancel"></shequdialog>
   
    <!-- 残疾人数弹窗 -->
    <canjirenshudialog :visible2="visible2" @handelCancel2 = "handleCancel2"></canjirenshudialog>

  </div>
</template>

<script>
//左
import canjileibie from "@/components/left/canjileibie";
import canjidengji from "@/components/left/canjidengji";
import yewudaiban from "@/components/left/yewudaiban";
// //中
// import catenav from "@/components/center/catenav";
import areamap from "@/components/center/areamap";
import gedifenbu from "@/components/center/gedifenbu";
//右
import fuwurenshu from "@/components/right/fuwurenshu";
import jiuyeleixing from "@/components/right/jiuyeleixing";

//中间 弹窗
import shequdialog from "@/components/dialog/shequdialog";
import canjirenshudialog from "@/components/dialog/canjirenshudialog"; // 残疾人数弹窗


export default {
  name: "bigScreen",
  components: {
    canjileibie,
    canjidengji,
    yewudaiban,
    areamap,
    gedifenbu,
    fuwurenshu,
    jiuyeleixing,
    shequdialog,
    canjirenshudialog
  },
  data() {
    return {
      visible1:false, //控制社区显示弹窗
      visible2:false, //控制残疾人数显示弹窗
      showSq:'',
      showSelectArea:false,
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      dialogVisible: false, //查看项目弹窗
      dialogVisible1: false, //查看街道数据弹窗
      dialogVisible2: false, //查看政策文件弹窗
      dialogVisible3: false, //查看社区数据弹窗
      dialogVisible4: false, //查看人员名单弹窗
      dialogVisible5: false, //社区名单弹窗

      time1: "",
      data: [
        {
          label: "金水区",
          children: [
            {
              label: "文化路街道",
              children: [
                {
                  label: "农大社区",
                },
                {
                  label: "郑大工学院社区",
                },
                {
                  label: "郑花路社区",
                },
                {
                  label: "博物馆社区",
                },
              ],
            },
            {
              label: "南阳新村街道",
            },
            {
              label: "经八路街道",
            },
          ],
        },
      ],
      tableData: [
        {
          xmname: "“三无残疾人”生活救助",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "特殊生活补贴",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "残疾人托养服务",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "困难残疾人生活补贴",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "重度残疾人护理补贴",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "残疾儿童康复救助",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "低保家庭精神病患者医疗救助",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "绿城通关爱IC卡",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "残疾人机动轮椅车燃油补贴",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "通讯信息消费补贴",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "严重精神障碍患者监护人奖金",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
      ],
      //项目街道数据
      xmData: [
        {
          xmname: "经八路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "花园路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "人民路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "杜岭街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "经八路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "花园路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "人民路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "杜岭街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "经八路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "花园路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "人民路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "杜岭街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
      ],
      //社区街道数据
      sqData: [
        {
          xmname: "体育社区",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "任寨社区",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        }
      ],
      //人员名单数据
      renyuanData: [
        {
          jiedao: "经八路街道",
          shequ: "体育社区",
          xingming: "丁心爱",
          xingbie: "女",
          canjizhenghao: "410000000000000000",
          minzu: "汉族",
          canjileibie: "肢体残疾",
          canjidengji: "一级",
          wenhuachengdu: "专科",
          hukouleixing: "非农业",
          lianxidianhua: "18037101111",
          jiadingzhuzhi: "郑州市金水区同乐路3号院1号楼14号",
        },
        {
          jiedao: "经八路街道",
          shequ: "体育社区",
          xingming: "丁心爱",
          xingbie: "女",
          canjizhenghao: "410000000000000000",
          minzu: "汉族",
          canjileibie: "肢体残疾",
          canjidengji: "一级",
          wenhuachengdu: "专科",
          hukouleixing: "非农业",
          lianxidianhua: "18037101111",
          jiadingzhuzhi: "郑州市金水区同乐路3号院1号楼14号",
        },
         {
          jiedao: "经八路街道",
          shequ: "体育社区",
          xingming: "丁心爱",
          xingbie: "女",
          canjizhenghao: "410000000000000000",
          minzu: "汉族",
          canjileibie: "肢体残疾",
          canjidengji: "一级",
          wenhuachengdu: "专科",
          hukouleixing: "非农业",
          lianxidianhua: "18037101111",
          jiadingzhuzhi: "郑州市金水区同乐路3号院1号楼14号",
        },
         {
          jiedao: "经八路街道",
          shequ: "体育社区",
          xingming: "丁心爱",
          xingbie: "女",
          canjizhenghao: "410000000000000000",
          minzu: "汉族",
          canjileibie: "肢体残疾",
          canjidengji: "一级",
          wenhuachengdu: "专科",
          hukouleixing: "非农业",
          lianxidianhua: "18037101111",
          jiadingzhuzhi: "郑州市金水区同乐路3号院1号楼14号",
        },
         {
          jiedao: "经八路街道",
          shequ: "体育社区",
          xingming: "丁心爱",
          xingbie: "女",
          canjizhenghao: "410000000000000000",
          minzu: "汉族",
          canjileibie: "肢体残疾",
          canjidengji: "一级",
          wenhuachengdu: "专科",
          hukouleixing: "非农业",
          lianxidianhua: "18037101111",
          jiadingzhuzhi: "郑州市金水区同乐路3号院1号楼14号",
        },
         {
          jiedao: "经八路街道",
          shequ: "体育社区",
          xingming: "丁心爱",
          xingbie: "女",
          canjizhenghao: "410000000000000000",
          minzu: "汉族",
          canjileibie: "肢体残疾",
          canjidengji: "一级",
          wenhuachengdu: "专科",
          hukouleixing: "非农业",
          lianxidianhua: "18037101111",
          jiadingzhuzhi: "郑州市金水区同乐路3号院1号楼14号",
        }
      ],
      //享受标准数据
      xiangshoubiaozhunData: [
        {
          index: "1",
          text: "无劳动能力",
        },
        {
          index: "2",
          text: "无生活来源",
        },
        {
          index: "3",
          text: "分散供养",
        },
        {
          index: "4",
          text: "无监护人或监护人无劳动能力无生活来源",
        },
      ],
      //解除条件数据
      jiechutiaojianData: [
        {
          index: "1",
          text: "亡故",
        },
        {
          index: "2",
          text: "有劳动能力",
        },
        {
          index: "3",
          text: "有经济来源",
        },
        {
          index: "4",
          text: "有法定抚养人或赡养人",
        },
        {
          index: "5",
          text: "其他",
        }
      ],
      //相关材料打印
      xiangguancailiaoData: [
        {
          index: "1",
          text: "“三无残疾人”生活救助申请审批表",
        },
        {
          index: "2",
          text: "“三无残疾人”解除生活救助审批表",
        }
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
       formInline: {
          user: '',
          region1: '',
          region2: '',
          region3: '',
          region4: '',
          region5: '',
          region6: '',
          region7: '',
          region8: '',
          region9: ''
        },
      showZcfw: "0",
      showsJiedaoTitle: "",
      showShequTitle:"",
      curXiangmu:'',
      curJiedao:'',
      curShequ:''
    };
  },
  computed: {
    // 默认时间
    timeDefault() {
      var date = new Date();
      var s1 =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      return s1;
    },
  },
  created() {
    this.time = this.timeDefault;
  },
  methods: {
    //社区人数
    handelShequDialog(){
      this.visible1 = true
    },
    handleCancel (){
      console.log('社区')
      this.visible1 = false
    },
    //残疾人数
    canjirenshuDialog(){
      this.visible2 = true
    },
    handleCancel2(){
       console.log('残疾人')
      this.visible2 = false
    },
    handleshowSelectArea(){
      this.showSelectArea=true?this.showSelectArea=false:this.showSelectArea=true;
    },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
    // handleClose(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },
    //查看政策文件
    showZcwj() {},
    //项目点击查看街道
    showsJiedao(row) {
      console.log(row.xmname);
      this.dialogVisible1 = true;
      this.showsJiedaoTitle = "金水区" + row.xmname + "统计表";
      this.curXiangmu = row.xmname;
    },
    //街道点击查看社区
    showShequ(row){
      this.dialogVisible3 = true;
      this.showShequTitle = row.xmname+ this.curXiangmu + "统计表";
    },
    //人员点击查看弹窗
    showsRenyuan(row){
      this.dialogVisible4 = true;
      this.showShequTitle = row.xmname+ this.curXiangmu + "统计表";
    },
    //查看政策弹窗
    showZc() {
      this.dialogVisible2 = true;
    },
    //人数页面提交查询条件
    onSubmit() {
      console.log('submit!');
    },
    indexMethod(index) {
      return index + 1;
    },
    clickDay(data) {
      console.log(data); //选中某天
    },
    changeDate(data) {
      console.log(data); //左右点击切换月份
    },
    clickToday(data) {
      console.log(data); //跳到了本月
    },
    //选择区域
    handleNodeClick() {},
    //选择服务
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page {
  width: 100%;
  height: 100%;
  background: #fffaf2;
  background-size: 100% 100%;
}
.mainDiv {
  width: 100%;
  height: 100%;
  /* background:url(/static/mengban.png) no-repeat center center; */
  background-size: 100% 100%;
  display: flex;
  flex-flow: column;
}

.header {
  width: 100%;
  height: 130px;
  background: url(/static/headbg.png) no-repeat center 40px;
  background-size: 100% auto;
  display: flex;
  justify-content: space-between;
  align-content: center;
  justify-items: center;
  padding-top: 40px;
}
.title {
  color: #fff;
  height: 56px;
  line-height: 56px;
}

.menu-list {
  padding: 0 20px;
  margin-top: 20px;
}
.menu-list .item {
  color: #a6803b;
  font-weight: bold;
  display: inline-block;
  padding: 0 10px;
  text-align: center;
  height: 50px;
  position: relative;
  line-height: 50px;
  box-sizing: border-box;
  border-radius: 5px;
}
.select-item {
  display: inline-block;
  padding: 0 20px;
  text-align: center;
  height: 30px;
  position: relative;
  line-height: 30px;
  box-sizing: border-box;
  border-radius: 5px;
}
.menu-list .active {
  border-bottom: 4px solid #4b8df8;
 
}

.contentWrap {
  flex: 1;
  width: 100%;
  letter-spacing: 1px;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.conLeft,
.conRight {
  width: 25%;
  padding: 0 1%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: top;
  justify-content: flex-start;
}
.conLeft > div,
.conRight > div,
.conCenter > div,
.conRight > div {
  width: 100%;
  display: block;
}

/* 中间的分类样式 */
.box-list{
   display: flex;
   justify-content: space-between;
 }
 .box{
  width: 220px;
  height:180px;
  background: url(../../static/panelbox.png) no-repeat;
  text-align: center;
  background-size:100% auto;
  color:#fff;
 }
  .box .text{
    padding:20px 0;
  }
 .box .text span{
   font-size:16px;
   border-radius: 8px;
   padding:5px 50px;
   background: -webkit-linear-gradient(left,#006ae1,#16b7ff);
   background: -webkit-linear-gradient(left,#006ae1,#16b7ff);
		background: -o-linear-gradient(left,#006ae1,#16b7ff);
		background: -moz-linear-gradient(left,#006ae1,#16b7ff);
		background: -mos-linear-gradient(left,#006ae1,#16b7ff);
		background: linear-gradient(left,#006ae1,#16b7ff);
   
 }
 .box .num{
   font-size:32px;
    color:#58dbff;
 }

.handle {
  display: flex;
  justify-content: space-between;
}
.handle .ico {
  width: 30px;
  height: 30px;
}
.handle .text {
  color: #58dbff;
  font-size: 14px;
}

.handle .select-area,
.handle .fuwuhuizong {
  float: left;
  padding: 5px 20px 20px 0;
}

.handle2 {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.handle2 .ico {
  width: 30px;
  height: 30px;
}
.handle2 .text {
  color: #58dbff;
  font-size: 14px;
}

.handle2 .select-time {
  position: relative;
  padding: 5px 20px 20px 0;
  width: 100%;
}
.handle2 .select-time .time-tip {
  position: absolute;
  width: 100%;
  direction: block;
  left: 0;
  top: 30px;
}
.conCenter {
  width: 47%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: top;
  justify-content: flex-start;
}

.canjileibie {
  height: 40%;
}
.canjidengji {
  height: 40%;
}

.catenav {
  height: 20%;
}
.areamap {
  height: 40%;
}
.gedifenbu {
  height: 30%;
}

.fuwurenshu {
  height: 50%;
}
.jiuyeleixing {
  height: 50%;
}
.select-area {
  position: relative;
}
.select-wrap {
  position: absolute;
  width: 200px;

  background: #fff;
  padding: 20px 0;
  top: 40px;
  z-index: 66;
}
/*政策服务享受情况统计汇总表*/
.shuoming-handel {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.shuoming-handel2 {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.shuoming .smtitle {
  color: #666;
  font-size: 16px;
  padding: 20px 0 10px;
}
.shuoming p {
  font-size: 12px;
  color: #444;
  line-height: 22px;
}
.shuoming p.red {
  color: rgb(173, 46, 46);
}
.zctitle{
  font-size:16px;
  font-weight: bold;
  padding:15px 0;
}
.zcdetail{
  font-size: 14px;
  color: #888;
  padding:10px 0;
}
.zcdetail .red{
  color: rgb(173, 46, 46);
}
</style>
